import './style/custom.scss'
import { h } from 'vue'
import { ElImage } from 'element-plus'
import { useDict } from '@/utils/dict'
import { selectDictLabel, selectDictLabels, parseTime } from '@/utils/ruoyi'
import { numberFormat } from './utils'
import customSelectCode from './form/customSelectCode.vue';
import customRadioCode from './form/customRadioCode.vue';
import customCheckboxCode from './form/customCheckboxCode.vue';
import customTimeRegion from './form/customTimeRegion.vue';
import customImageUpload from './form/customImageUpload.vue';
import customVideoUpload from './form/customVideoUpload.vue';
import customEditor from './form/customEditor.vue';
import customChart from './customChart.vue';
import customDialog from './customDialog.vue';
import customDrawer from './customDrawer.vue';
import dataFormDialog from './dataFormDialog.vue';
import dataFormDrawer from './dataFormDrawer.vue';
import importUploadFile from './importUploadFile.vue';
import customImport from './customImport.vue';

// 特殊的显示函数
const nameDisplay = (r, c, v, i) => {
  if (v === '0') {
    return '-'
  }
  return r.iterms[`${c.property}Name`] || ''
}
const blueDisplay = (r, c, v, i) => {
  return h('span', { style: 'color:#3867FF' }, v)
}

const imageDisplay = (r, c, v, i) => {
  v = v.split(',').map(it => `${import.meta.env.VITE_APP_BASE_API}${it}`)
  const size = '50px'
  return h(ElImage, { style: { width: size, height: size }, src: v[0], fit: "fill", previewSrcList: v, previewTeleported: true })
}

const imageOssDisplay = (r, c, v, i) => {
  v = v.split(',')
  const size = '50px'
  return h(ElImage, { style: { width: size, height: size }, src: v[0], fit: "fill", previewSrcList: v, previewTeleported: true })
}

const videoOssDisplay = (r, c, v, i) => {
  v = v.split(',')
  const size = '50px'
  return h('video', { style: { width: size, height: size } }, [h('source', { src: v[0] }), '您的浏览器不支持Video标签。'])
}

const timeDisplay = (r, c, v, i) => {
  return parseTime(v);
}

const dictDisplay = (code) => {
  const codes = useDict(code);
  return (r, c, v, i) => {
    return selectDictLabel(codes[code].value, v);
  }
}

const dictsDisplay = (code, separator) => {
  const codes = useDict(code);
  return (r, c, v, i) => {
    return selectDictLabels(codes[code].value, v, separator);
  }
}

const numberDisplay = (v) => {
  return v ? numberFormat(v, { unit: '' }) : '无价格';
}

export default {
  components: [
    customSelectCode, customRadioCode, customCheckboxCode, customTimeRegion, customImageUpload, customVideoUpload, customEditor,
    customChart, customDialog, customDrawer, dataFormDialog, dataFormDrawer, importUploadFile, customImport
  ],
  displays: [
    { name: 'nameDisplay', fun: nameDisplay },
    { name: 'blueDisplay', fun: blueDisplay },
    { name: 'imageDisplay', fun: imageDisplay },
    { name: 'imageOssDisplay', fun: imageOssDisplay },
    { name: 'videoOssDisplay', fun: videoOssDisplay },
    { name: 'timeDisplay', fun: timeDisplay },
    { name: 'dictDisplay', fun: dictDisplay },
    { name: 'dictsDisplay', fun: dictsDisplay },
    { name: 'numberDisplay', fun: numberDisplay }
  ],
  install (app, options) {
    this.components.forEach((component) => {
      app.component(component.name, component);
    })
    this.displays.forEach((display) => {
      app.config.globalProperties[`$${display.name}`] = display.fun;
    })
  }
}